<%@ include file="/WEB-INF/jsp/includes.jsp" %> 
<c:set var="editPetFormId"  value="editPetForm_${index}"/>
<c:set var="addVisitFormId"  value="addVisitForm_${index}"/>
    <table width="94%">
      <tr>
        <td valign="top">
          <table>
            <tr>
              <th>Name</th>
              <td><b>${pet.name}</b></td>
            </tr>
            <tr>
              <th>Birth Date</th>
              <td><fmt:formatDate value="${pet.birthDate}" pattern="yyyy-MM-dd"/></td>
            </tr>
            <tr>
              <th>Type</th>
              <td>${pet.type.name}</td>
            </tr>
          </table>
        </td>
        <td valign="top">
          <table>
            <tr>
            <thead>
              <th>Visit Date</th>
              <th>Description</th>
            </thead>
            </tr>
            <c:forEach var="visit" items="${pet.visits}">
              <tr>
                <td><fmt:formatDate value="${visit.date}" pattern="yyyy-MM-dd"/></td>
                <td>${visit.description}</td>
              </tr>
            </c:forEach>
          </table>
        </td>
      </tr>
    </table>
    <table class="table-buttons">
      <tr>
        <td> 
          <form method="GET" id="<c:out value="${editPetFormId}"/>"  action="<c:url value="/editPet.do"/>" name="formEditPet${pet.id}">
            <input type="hidden" name="petId" value="${pet.id}"/>
            <p class="submit"><input type="submit" value="Edit Pet"/></p>
          </form>
        </td>
        <td>
          <form method="GET" id="<c:out value="${addVisitFormId}"/>" action="<c:url value="/addVisit.do"/>" name="formVisitPet${pet.id}">
            <input type="hidden" name="petId" value="${pet.id}"/>
            <p class="submit"><input type="submit" value="Add Visit"/></p>
          </form>
        </td>
      </tr>
    </table>

	<script language="JavaScript">
	//CHUCK TODO Remove these and look at javascript jsp that does this, then turn this into
	//something we can do with liveQuery.
	
	//Note:  I would prefer that a controller know enough about the creation of the form
	//ids that it could write these javascript methods.  But I recognize that many
	//developers wouldn't like to do this scripting in two separate places, so I show
	//how easily it can be done here.  Those developers should, however, understand that
	//if they want the capability of having a controller provide unobtrusive javascript,
	//that controller will need to know a good deal about the page.  That is, some
	//additional coupling of page and controller is unavoidable.
	//$(function() {
		$.remoteForm('<c:out value="${editPetFormId}"/>')
		$.remoteForm('<c:out value="${addVisitFormId}"/>')
	//});  
	</script>
